<!doctype html>
[#escape x as (x)!?html]
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <title>${vote.title} - ${site.title}</title>
  <meta name="keywords" content="${site.seoKeywords}">
  <meta name="description" content="${site.seoDescription}">
  <meta name="_csrf" content="${_csrf.token}"/>
  <meta name="_csrf_header" content="${_csrf.headerName}"/>
  [#include 'inc_meta.html'/]
  [#include 'inc_css.html'/]
  [#include 'inc_js.html'/]
</head>
<body>
[#assign headerShadow=true/]
[#include 'inc_header.html'/]
<div class="bg-gray-200">
  <div class="container">
    <nav class="row" aria-label="breadcrumb">
      <ol class="col list-inline my-2">
        <li class="list-inline-item"><a href="${site.url}">首页</a></li>
        <li class="list-inline-item">/</li>
        <li class="list-inline-item"><a href="${dy}/vote">投票</a></li>
      </ol>
    </nav>
  </div>
</div>
<div class="container mt-4">
  <h3>${vote.title}</h3>
  <div class="mt-2 pb-2 border-bottom text-muted">
    <div>
      <span>${format(vote.created, 'yyyy-MM-dd HH:mm')}</span>
      [#if vote.status == 0]
      <span class="ml-2 badge badge-success">进行中</span>
      [#elseif vote.status == 1]
      <span class="ml-2 badge badge-secondary">未启用</span>
      [#elseif vote.status == 2]
      <span class="ml-2 badge badge-warning">未开始</span>
      [#elseif vote.status == 3]
      <span class="ml-2 badge badge-info">已结束</span>
      [#else]
      <span class="ml-2 badge badge-danger">未知状态</span>
      [/#if]
      <i class="ml-2 fas fa-vote-yea text-primary" title="参与人次"></i> <span>${vote.times}</span>
    </div>
    [#if vote.description??]
    <div class="mt-2 small">${vote.description}</div>
    [/#if]
  </div>
  <form id="voteForm" action="${api}/vote/cast" method="post">
    <div class="mt-3 small check-group">
      [#list vote.options as option]
      <div class="form-check mt-2 text-muted">
        <input class="form-check-input" type="${vote.multiple?string('checkbox','radio')}" name="options" id="vote-${vote.id?c}-${option_index?c}" value="${option.id?c}" required>
        <label class="form-check-label" for="vote-${vote.id?c}-${option_index?c}">
          ${option.title}
        </label>
      </div>
      [/#list]
    </div>
    <input type="hidden" name="id" value="${vote.id?c}">
    <div class="mt-4 text-center">
      <button type="submit" class="btn btn-primary btn-sm">提交</button>
      <a href="${dy}/vote/${vote.id?c}/result" class="ml-2 btn btn-outline-danger btn-sm">查看结果</a>
    </div>
  </form>

  <script>
    $('#voteForm').validate({
      submitHandler: function (form) {
        request.post(form.action, $(form).serializeJSON()).then(function (response) {
          var data = response.data;
          if (data.status === 0) {
            displayAlert('投票成功');
            $('#voteForm')[0].reset();
          } else if (data.message) {
            displayAlert(data.message);
            $('#voteForm')[0].reset();
          }
        });
      }
    });
  </script>
</div>
[#include 'inc_footer.html'/]
[#include 'inc_message_box.html'/]
</body>
</html>
[/#escape]
